<template>
	<div id="map"></div>
</template>
<script>
export default {
	data() {
		return {
			map: null
		}
	},
	mounted() {
		this.map = new BMap.Map("map")
		this.map.centerAndZoom(new BMap.Point(116.873079,28.245442), 18);  // 初始化地图,设置中心点坐标和地图级别
		//添加地图类型控件
		// this.map.addControl(new BMap.MapTypeControl({
		// 	mapTypes:[
	 //            BMAP_NORMAL_MAP, //地图
	 //            BMAP_HYBRID_MAP  //混合
	 //    	]
		// }));
		this.map.setCurrentCity("鹰潭");// 设置地图显示的城市 此项是必须设置的
		this.map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
	},
	methods: {
		//判断数据类型
		JudgeType(o){
			var s = Object.prototype.toString.call(o);
			return s.match(/\[object (.*?)\]/)[1].toLowerCase();
	    },
		//地图撒点
		addMarker(x,y,fnObj) { // fnObj: [{fnType: 'click',fn() {...}}]
			//创建icon
			let imgIcon = new BMap.Icon(require('../assets/imgs/light.png'), new BMap.Size(20,20),{
				imageSize: {width: 20,height: 20}, //设置img的大小，new BMap.Size()设置的是元素大小
				anchor: new BMap.Size(10, 20) //原位置为图片左上角，往左偏移10，往上偏移20
			});
			let marker = new BMap.Marker(new BMap.Point(x,y),{icon: imgIcon}) // 创建标注
			
			//添加事件
			if(this.JudgeType(fnObj) === 'object') {
				marker.addEventListener(fnObj.fnType,(type) => {
					fnObj.fn(type)
				})
			} else if(this.JudgeType(fnObj) === 'array') {
				fnObj.forEach(item => {
					marker.addEventListener(item.fnType,(type) => {
						item.fn(type)
					})
				})
			}
			
			this.map.addOverlay(marker)

			// 创建折线
			// let polyline = new BMap.Polyline([
			// 	new BMap.Point(116.399, 39.910),
			// 	new BMap.Point(116.405, 39.920),
			// 	new BMap.Point(116.425, 39.900)
			// ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});   
			
			//创建圆
			// let circle = new BMap.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}) 
			
			//创建多边形
			// let polygon = new BMap.Polygon([
			// 	new BMap.Point(116.387112,39.920977),
			// 	new BMap.Point(116.385243,39.913063),
			// 	new BMap.Point(116.394226,39.917988),
			// 	new BMap.Point(116.401772,39.921364),
			// 	new BMap.Point(116.41248,39.927893)
			// ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}) 
			
			//创建矩形
			// let pStart = new BMap.Point(116.392214,39.918985);
			// let pEnd = new BMap.Point(116.41478,39.911901);
			// let rectangle = new BMap.Polygon([
			// 	new BMap.Point(pStart.lng,pStart.lat),
			// 	new BMap.Point(pEnd.lng,pStart.lat),
			// 	new BMap.Point(pEnd.lng,pEnd.lat),
			// 	new BMap.Point(pStart.lng,pEnd.lat)
			// ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}) 
			
			// //添加覆盖物
			// function add_overlay(){
			// 	map.addOverlay(marker);            //增加点
			// 	map.addOverlay(polyline);          //增加折线
			// 	map.addOverlay(circle);            //增加圆
			// 	map.addOverlay(polygon);           //增加多边形
			// 	map.addOverlay(rectangle);         //增加矩形
			// }
			
			// //清除覆盖物
			// function remove_overlay(){
			// 	map.clearOverlays();         
			// }
		}
	}
}
</script>
<style>
	body, html,#map {
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin:0;
		font-family:"微软雅黑";
	}
</style>